<template>
  <el-container>
    <el-aside width="auto">
      <el-scrollbar class="sidebar-container">
        <el-menu
          class="el-menu-vertical"
          background-color="#424b5c"
          text-color="#fff"
          active-text-color="#ffd04b"
          :collapse="isCollapse"
        >
          <el-menu-item index="0" class="home" :style="{ color: theme }" @click="handleResetTab">
            <i class="fa fa-home fa-fw fa-3x" :style="{ color: theme }"></i>
            <router-link :to="{name: 'home'}" tag="span" class="fs16 text-bold">数据中心平台</router-link>
          </el-menu-item>
          <el-submenu index="1" v-if="loginUser.actions.includes('package_manage')">
            <template slot="title">
              <i class="fa fa-th-large fa-fw fa-lg"></i>
              <span slot="title">录入管理</span>
            </template>
            <el-menu-item-group>
              <router-link :to="{name: 'package'}" tag="span">
                <el-menu-item index="1-1" @click="addTab('包管理', 'package')">
                  <i class="fa fa-file-text-o fa-fw"></i>包管理
                </el-menu-item>
              </router-link>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2" v-if="loginUser.actions.includes('business_manage')">
            <template slot="title">
              <i class="fa fa-briefcase fa-fw fa-lg"></i>
              <span slot="title">业务管理</span>
            </template>
            <el-menu-item-group>
              <router-link :to="{name: 'business'}" tag="span">
                <el-menu-item index="2-1" @click="addTab('业务订单管理', 'business')">
                  <i class="fa fa-file-text-o fa-fw"></i>业务订单管理
                </el-menu-item>
              </router-link>
            </el-menu-item-group>
            <el-menu-item-group>
              <router-link :to="{name: 'plan'}" tag="span">
                <el-menu-item index="2-2" @click="addTab('业务计划管理', 'plan')">
                  <i class="fa fa-file-text-o fa-fw"></i>业务计划管理
                </el-menu-item>
              </router-link>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3" v-if="loginUser.actions.includes('resource_manage')">
            <template slot="title">
              <i class="fa fa-car fa-fw fa-lg"></i>
              <span slot="title">资源管理</span>
            </template>
            <el-menu-item-group>
              <router-link :to="{name: 'car_resources'}" tag="span">
                <el-menu-item index="3-1" @click="addTab('资源订单管理', 'car_resources')">
                  <i class="fa fa-file-text-o fa-fw"></i>资源订单管理
                </el-menu-item>
              </router-link>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="4" v-if="loginUser.actions.includes('warrant_manage')">
            <template slot="title">
              <i class="fa fa-university fa-fw fa-lg"></i>
              <span slot="title">权证管理</span>
            </template>
            <el-menu-item-group>
              <router-link :to="{name: 'warrant'}" tag="span">
                <el-menu-item index="4-1" @click="addTab('权证订单管理', 'warrant')">
                  <i class="fa fa-file-text-o fa-fw"></i>权证订单管理
                </el-menu-item>
              </router-link>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="5" v-if="loginUser.actions.includes('finance_manage')">
            <template slot="title">
              <i class="fa fa-credit-card-alt fa-fw fa-lg"></i>
              <span slot="title">财务管理</span>
            </template>
            <el-menu-item-group>
              <router-link :to="{name: 'finance'}" tag="span">
                <el-menu-item index="5-1" @click="addTab('财务订单管理', 'finance')">
                  <i class="fa fa-file-text-o fa-fw"></i>财务订单管理
                </el-menu-item>
              </router-link>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="6" v-if="loginUser.actions.includes('system_manage')">
            <template slot="title">
              <i class="fa fa-cog fa-fw fa-lg"></i>
              <span slot="title">系统管理</span>
            </template>
            <el-menu-item-group>
              <router-link :to="{name: 'centers'}" tag="span">
                <el-menu-item index="6-1" @click="addTab('中心管理', 'centers')">
                  <i class="fa fa-file-text-o fa-fw"></i>中心管理
                </el-menu-item>
              </router-link>
            </el-menu-item-group>
            <el-menu-item-group>
              <router-link :to="{name: 'departments'}" tag="span">
                <el-menu-item index="6-2" @click="addTab('部门管理', 'departments')">
                  <i class="fa fa-file-text-o fa-fw"></i>部门管理
                </el-menu-item>
              </router-link>
            </el-menu-item-group>
            <el-menu-item-group>
              <router-link :to="{name: 'salesmans'}" tag="span">
                <el-menu-item index="6-3" @click="addTab('业务员管理', 'salesmans')">
                  <i class="fa fa-file-text-o fa-fw"></i>业务员管理
                </el-menu-item>
              </router-link>
            </el-menu-item-group>
            <el-menu-item-group>
              <router-link :to="{name: 'negotiators'}" tag="span">
                <el-menu-item index="6-4" @click="addTab('谈判师管理', 'negotiators')">
                  <i class="fa fa-file-text-o fa-fw"></i>谈判师管理
                </el-menu-item>
              </router-link>
            </el-menu-item-group>
            <el-menu-item-group>
              <router-link :to="{name: 'promotion_channel'}" tag="span">
                <el-menu-item index="6-5" @click="addTab('推广渠道管理', 'promotion_channel')">
                  <i class="fa fa-file-text-o fa-fw"></i>推广渠道管理
                </el-menu-item>
              </router-link>
            </el-menu-item-group>
            <el-menu-item-group>
              <router-link :to="{name: 'reasons_not_signing'}" tag="span">
                <el-menu-item index="6-6" @click="addTab('未签订原因管理', 'reasons_not_signing')">
                  <i class="fa fa-file-text-o fa-fw"></i>未签订原因管理
                </el-menu-item>
              </router-link>
            </el-menu-item-group>
            <el-menu-item-group>
              <router-link :to="{name: 'reasons_not_pass'}" tag="span">
                <el-menu-item index="6-7" @click="addTab('未审过原因管理', 'reasons_not_pass')">
                  <i class="fa fa-file-text-o fa-fw"></i>未审过原因管理
                </el-menu-item>
              </router-link>
            </el-menu-item-group>
            <el-menu-item-group>
              <router-link :to="{name: 'reasons_cancellation'}" tag="span">
                <el-menu-item index="6-8" @click="addTab('退单原因管理', 'reasons_cancellation')">
                  <i class="fa fa-file-text-o fa-fw"></i>退单原因管理
                </el-menu-item>
              </router-link>
            </el-menu-item-group>
            <el-menu-item-group>
              <router-link :to="{name: 'trial_channel'}" tag="span">
                <el-menu-item index="6-9" @click="addTab('审过渠道管理', 'trial_channel')">
                  <i class="fa fa-file-text-o fa-fw"></i>审过渠道管理
                </el-menu-item>
              </router-link>
            </el-menu-item-group>
            <el-menu-item-group>
              <router-link :to="{name: 'warrant_man'}" tag="span">
                <el-menu-item index="6-10" @click="addTab('权证专员管理', 'warrant_man')">
                  <i class="fa fa-file-text-o fa-fw"></i>权证专员管理
                </el-menu-item>
              </router-link>
            </el-menu-item-group>
            <el-menu-item-group>
              <router-link :to="{name: 'distribution'}" tag="span">
                <el-menu-item index="6-11" @click="addTab('客户分布管理', 'distribution')">
                  <i class="fa fa-file-text-o fa-fw"></i>客户分布管理
                </el-menu-item>
              </router-link>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="7" v-if="loginUser.actions.includes('users_manage')">
            <template slot="title">
              <i class="fa fa-user-circle-o fa-fw fa-lg"></i>
              <span slot="title">用户管理</span>
            </template>
            <el-menu-item-group>
              <router-link :to="{name: 'users'}" tag="span">
                <el-menu-item index="7-1" @click="addTab('用户管理', 'users')">
                  <i class="fa fa-user-o fa-fw"></i>用户管理
                </el-menu-item>
              </router-link>
            </el-menu-item-group>
            <el-menu-item-group>
              <router-link :to="{name: 'roles'}" tag="span">
                <el-menu-item index="7-2" @click="addTab('角色管理', 'roles')">
                  <i class="fa fa-users fa-fw"></i>角色管理
                </el-menu-item>
              </router-link>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="8" v-if="loginUser.actions.includes('archives_manage')">
            <template slot="title">
              <i class="fa fa-archive fa-fw fa-lg"></i>
              <span slot="title">资料管理</span>
            </template>
            <el-menu-item-group>
              <router-link :to="{name: 'archives'}" tag="span">
                <el-menu-item index="8-1" @click="addTab('资料管理', 'archives')">
                  <i class="fa fa-file-text-o fa-fw"></i>资料管理
                </el-menu-item>
              </router-link>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="9">
            <template slot="title">
              <i class="fa fa-line-chart fa-fw fa-lg"></i>
              <span slot="title">统计管理</span>
            </template>
            <el-menu-item-group v-if="loginUser.actions.includes('statistics_business')">
              <router-link :to="{name: 'Stats_business'}" tag="span">
                <el-menu-item index="9-1" @click="addTab('业务部数据统计', 'Stats_business')">
                  <i class="fa fa-file-text-o fa-fw"></i>业务部数据统计
                </el-menu-item>
              </router-link>
            </el-menu-item-group>
            <el-menu-item-group v-if="loginUser.actions.includes('statistics_promotion')">
              <router-link :to="{name: 'Stats_promotion'}" tag="span">
                <el-menu-item index="9-2" @click="addTab('广告部数据统计', 'Stats_promotion')">
                  <i class="fa fa-file-text-o fa-fw"></i>广告部数据统计
                </el-menu-item>
              </router-link>
            </el-menu-item-group>
            <el-menu-item-group v-if="loginUser.actions.includes('statistics_warrant')">
              <router-link :to="{name: 'Stats_warrant'}" tag="span">
                <el-menu-item index="9-3" @click="addTab('权证部数据统计', 'Stats_warrant')">
                  <i class="fa fa-file-text-o fa-fw"></i>权证部数据统计
                </el-menu-item>
              </router-link>
            </el-menu-item-group>
            <el-menu-item-group v-if="loginUser.actions.includes('statistics_resource')">
              <router-link :to="{name: 'Stats_resource'}" tag="span">
                <el-menu-item index="9-4" @click="addTab('资源部数据统计', 'Stats_resource')">
                  <i class="fa fa-file-text-o fa-fw"></i>资源部数据统计
                </el-menu-item>
              </router-link>
            </el-menu-item-group>
            <el-menu-item-group v-if="loginUser.actions.includes('statistics_finance')">
              <router-link :to="{name: 'Stats_finance'}" tag="span">
                <el-menu-item index="9-5" @click="addTab('财务部数据统计', 'Stats_finance')">
                  <i class="fa fa-file-text-o fa-fw"></i>财务部数据统计
                </el-menu-item>
              </router-link>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-scrollbar>
    </el-aside>
    <el-container class="main-container" :style="{ marginLeft: marginLeft }">
      <el-header style="height: 62px;">
        <div class="navbar">
          <el-menu class="el-menu-demo" mode="horizontal">
            <div class="left-btn f-l">
              <el-button
                id="btn"
                :class="{ rotate: rotate }"
                @click="handleSwitch"
                :style="{ color: theme }"
                type="text"
                class="inline-block"
              >
                <i class="fa fa-navicon fa-3x"></i>
              </el-button>
              <el-breadcrumb separator="/" class="inline-block ml20 mb10">
                <el-breadcrumb-item class="pointer">首页</el-breadcrumb-item>
                <el-breadcrumb-item>{{breadcrumb}}</el-breadcrumb-item>
              </el-breadcrumb>
            </div>
            <div class="f-r">
              <el-popover class="right-list" placement="top" width="160" v-model="userInfo">
                <el-row style="text-align: center; padding: 0 12px;" :gutter="0">
                  <el-col :span="8">
                    <i class="fa fa-user-secret fa-3x"></i>
                  </el-col>
                  <el-col :span="16">
                    <span>{{this.loginUser.account}}</span>
                  </el-col>
                </el-row>
                <div style="text-align: center; margin-top: 10px">
                  <el-button size="mini" type="text" @click="handleModifyPass">修改密码</el-button>
                  <el-button size="mini" type="primary" @click="handleLogout">退出</el-button>
                </div>
                <el-button slot="reference">
                  <i class="fa fa-user-secret fa-lg"></i>
                  {{loginUser.account}}
                  <i class="el-icon-caret-bottom"></i>
                </el-button>
              </el-popover>
              <ModifyPassword :modifyPassword="modifyPassword" @close="handleClose"></ModifyPassword>
            </div>
            <div class="f-r right-list">
              <el-button>
                <router-link :to="{name: 'screen'}" tag="a" target="_blank">
                  <i class="fa fa-area-chart fa-fw"></i>大屏幕数据
                </router-link>
              </el-button>
            </div>
          </el-menu>
        </div>
        <div class="line"></div>
      </el-header>
      <el-main>
        <el-tabs
          closable
          type="card"
          v-model="activeTab"
          @tab-remove="removeTab"
          @tab-click="handleSwitchTab"
        >
          <el-tab-pane v-for="item in tabs" :key="item.name" :label="item.title" :name="item.name">
            <router-view :name="item.name"></router-view>
          </el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import ModifyPassword from "@/components/modify_password";

export default {
  name: "admin",
  data() {
    return {
      userInfo: false,
      isCollapse: true,
      rotate: false,
      modifyPassword: false,
      marginLeft: "65px",
      theme: "#409EFF",
      tabs: JSON.parse(sessionStorage.getItem("tabs")),
      tabIndex: 0,
      loginUser: JSON.parse(sessionStorage.getItem("loginUser")),
      activeTab: sessionStorage.getItem("activeTab")
    };
  },
  computed: {
    breadcrumb() {
      const data = this.tabs.find(item => item.name === this.activeTab);
      return data ? data.title : "";
    }
  },
  methods: {
    handleResetTab() {
      sessionStorage.setItem("tabs", JSON.stringify([]));
      sessionStorage.setItem("activeTab", "");
      this.tabs = JSON.parse(sessionStorage.getItem("tabs"));
      this.$router.push({ name: "home" });
    },
    addTab(title, alias) {
      const exist = this.tabs.filter(item => title === item.title);
      if (exist.length) return;

      let newTabName = ++this.tabIndex + "";
      this.tabs.push({
        title,
        name: alias,
        content: "alias"
      });
      sessionStorage.setItem("tabs", JSON.stringify(this.tabs));
      this.activeTab = newTabName;
      sessionStorage.setItem("activeTab", this.activeTab);
    },
    removeTab(targetName) {
      let tabs = this.tabs;
      let activeTab = this.activeTab;
      if (activeTab === targetName) {
        // 如果要删除的是当前选中的
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeTab = nextTab.name;
            }
          }
        });
      }
      this.activeTab = activeTab;
      sessionStorage.setItem("activeTab", this.activeTab);
      this.$router.push({ name: activeTab });
      this.tabs = tabs.filter(tab => tab.name !== targetName);
      sessionStorage.setItem("tabs", JSON.stringify(this.tabs));
      // 最后判断如果当前tabs为空时跳到后台首页
      if (!this.tabs.length) {
        this.handleResetTab();
      }
    },
    handleSwitchTab() {
      this.$router.push({ name: this.activeTab });
    },
    handleSwitch() {
      if (this.isCollapse) {
        this.isCollapse = !this.isCollapse;
        this.rotate = !this.rotate;
        this.marginLeft = "200px";
      } else {
        this.isCollapse = !this.isCollapse;
        this.rotate = !this.rotate;
        this.marginLeft = "65px";
      }
    },
    handleLogout() {
      this.$router.push("/login");
      sessionStorage.clear();
    },
    handleModifyPass() {
      this.modifyPassword = !this.modifyPassword;
      this.userInfo = !this.userInfo;
    },
    handleClose() {
      this.modifyPassword = !this.modifyPassword;
    }
  },
  watch: {
    $route(to) {
      let flag = false;
      for (let tab of this.tabs) {
        if (tab.name === to.name) {
          flag = true;
          // 如果tabs中有to的路由则设置activeTab为to的路由
          this.activeTab = to.name;
          sessionStorage.setItem("activeTab", this.activeTab);
          break;
        }
      }
    }
  },
  components: {
    ModifyPassword
  }
};
</script>
<style>
.el-menu-vertical:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
  height: 100%;
}
.el-scrollbar__view,
.el-menu {
  height: 100%;
}
.rotate {
  transition: transform 0.28s;
  transform: rotate(90deg);
}
.main-container {
  position: relative;
  transition: margin-left 0.48s;
}
.sidebar-container {
  height: 100%;
  transition: width 0.28s;
  position: fixed !important;
}
.navbar {
  height: 45px;
}
.tags-view-container {
  height: 35px;
  margin-top: 12px;
  border-bottom: 1px solid #cfcfcf;
}
.el-scrollbar__wrap {
  overflow-x: hidden;
}
.right-list {
  width: 166px;
  text-align: center;
  height: 100%;
  line-height: 50px;
}
.home {
  margin-left: -14px;
}
#btn {
  transition: transform 0.5s;
}
</style>
